// 淡入淡出
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

// 上滑入场
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 下滑入场
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 缩放入场
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

// 旋转发光
@keyframes spinGlow {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    filter: hue-rotate(180deg) brightness(1.2);
  }
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(360deg) brightness(1);
  }
}

// 呼吸效果
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

// 光束扫描
@keyframes beam {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(45deg);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(45deg);
  }
}

// 悬浮效果
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

// 波纹效果
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

// 闪烁效果
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

// 渐变动画
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

// 通用动画类
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active {
  animation: slideUp 0.3s ease-out;
}

.slide-down-enter-active {
  animation: slideDown 0.3s ease-out;
}

.scale-enter-active {
  animation: scaleIn 0.3s ease-out;
}

.float {
  animation: float 3s ease-in-out infinite;
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

.spin-glow {
  animation: spinGlow 3s linear infinite;
}

.ripple {
  animation: ripple 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.blink {
  animation: blink 1.5s ease-in-out infinite;
}

.gradient {
  background-size: 200% 200%;
  animation: gradient 5s ease infinite;
} 